<template>
    <view style="margin-bottom:200rpx" v-if="commentList.length !== 0">
        <block v-for="(item, index) in commentList" :key="index">
            <view class="assessment">
                <view class="store-info">
                    <view class="store-img"></view>
                    <view class="store-name">南宁凤凰谷景点区</view>
                    <view class="iconfont icon-xiangyou right"></view>
                </view>

                <view class="shopping-info">
                    <view class="shopping-img">
                        <img :src="item.spu.commodity_image_thum" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="shopping-label">
                        <view class="shopping-name">{{item.spu.spu_name}}</view>
                        <view class="shopping-price">￥{{item.spu.activity_price}}</view>
                    </view>
                </view>

                <view class="assessment-time">{{item.created_at}}</view>

                <view class="assessment-star">
                    <sunui-star :defaultStar="item.fraction" :maxStar="5" :starSize='"1.3em"' :disabledStar="true"/>
                </view>

                <view class="assessment-info">
                    <view class="user-img">
                        <img :src="customer.avatar_url" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="assessment-text">{{item.content}}</view>
                </view>

                <view class="assessment-upload-box">
                    <block v-for="(item1, index1) in item.images" :key="index1">
                        <view class="assessment-upload">
                            <img :src="item1" alt="" style="width:100%;height:100%">
                        </view>
                    </block>
                </view>
            </view>
        </block>
    </view>
    <view v-else>
        <view class="no-comment">
            <img :src="img_base_url + '/zanwushangpin.png'" alt="" style="width:100%;height:100%">
            <view class="no-comment-text">暂无点评</view>
        </view>
    </view>
</template>

<script>
import { UserModel } from '../../model/user'
import sunuiStar from '../../components/sunui-star/sunui-star'
import { config } from '../../common/utils/congfig'
const userModel = new UserModel()
export default {
    data() {
        return {
            img_base_url: config.img_base_url,
            commentList: [],
            customer: [],
            page: 1,
            flag: true
        }
    },
    components: {
        sunuiStar
    },
    methods: {
        getUserComment() {
            let data = {
                page: this.page
            }
            userModel.getUserAllComment(data).then((res) => {
                if(res.code == 200) {
                    this.customer = res.data.customer
                    this.commentList = this.commentList.concat(res.data.comment.data)
                    res.data.comment.data.length == 0 ? this.flag = false : this.flag = true
                }
            })
        }
    },
    onReachBottom() {
        if(this.flag == true) {
            this.page = this.page + 1
            this.getUserComment()
        }
    },
    onLoad() {
        this.getUserComment()
    }
}
</script>

<style>
    .sunui-m {
        width: 100% !important;
    }
    .sunui-stars-items {
        margin-right: 10rpx;
    }
    .assessment {
        width: 674rpx;
        /* height: 602rpx; */
        background: #ffffff;
        margin: 26rpx auto 0;
        border-radius: 10rpx;
        padding-bottom: 30rpx;
    }
    .store-info {
        position: relative;
        display: flex;
        justify-content: left;
    }
    .store-img {
        width: 29rpx;
        height: 27rpx;
        margin: 18rpx 24rpx 0 20rpx;
    }
    .store-name {
        color: #333333;
        font-size: 24rpx;
        margin-top: 15rpx;
    }
    .right {
        position: absolute;
        right: 30rpx;
        top: 18rpx;
        color: #999999;
        font-size: 30rpx;
    }
    .shopping-info {
        padding: 27rpx 0 12rpx 31rpx;
        border-bottom: 1rpx solid #F5F5F5;
        display: flex;
        justify-content: left;
    }
    .shopping-img {
        width: 117rpx;
        height: 117rpx;
    }
    .shopping-label {
        padding: 22rpx 0 0 23rpx;
    }
    .shopping-name {
        color: #333333;
        font-size: 24rpx;
        font-weight: 500;
    }
    .shopping-price {
        color: #FF1E1E;
        font-size: 24rpx;
        margin-top: 15rpx;
    }
    .assessment-time {
        padding: 19rpx 0 21rpx 17rpx;
        color: #999999;
        font-size: 24rpx;
        font-weight: 500;
    }
    .assessment-star {
        padding-left: 12rpx;
        display: flex;
        justify-content: left;
    }
    .star {
        width: 31rpx;
        height: 30rpx;
        margin-right: 15rpx;
    }
    .assessment-info {
        display: flex;
        justify-content: left;
        padding-left: 20rpx;
        margin-top: 40rpx;
    }
    .user-img {
        width: 57rpx;
        height: 57rpx;
    }
    .assessment-text {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
        margin-left: 20rpx;
        line-height: 57rpx;
    }
    .assessment-upload-box {
        width: 100%;
        margin-top: 40rpx;
        display: flex;
        justify-content: left;
    }
    .assessment-upload {
        width: 120rpx;
        height: 120rpx;
        background: #F5F5F5;
        margin-left: 25rpx;
        color: #999999;
        font-size: 24rpx;
        text-align: center;
        line-height: 120rpx;
    }
    .no-comment {
        width: 189rpx;
        height: 165rpx;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translateY(-50%);
        transform: translateX(-50%);
    }
    .no-comment-text {
        color: #919191;
        font-size: 26rpx;
        text-align: center;
        margin-top: 50rpx;
    }
</style>